import { useState } from 'react'
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import { Toaster } from '@/components/ui/sonner'
import Sidebar from './components/Sidebar'
import Dashboard from './components/Dashboard'
import DataManagement from './components/DataManagement'
import PredictionAnalysis from './components/PredictionAnalysis'
import ReportResults from './components/ReportResults'
import './App.css'

function App() {
  const [sidebarCollapsed, setSidebarCollapsed] = useState(false)

  return (
    <Router>
      <div className="flex h-screen bg-gray-50">
        <Sidebar 
          collapsed={sidebarCollapsed} 
          onToggle={() => setSidebarCollapsed(!sidebarCollapsed)} 
        />
        <main className={`flex-1 transition-all duration-300 ${sidebarCollapsed ? 'ml-16' : 'ml-64'}`}>
          <Routes>
            <Route path="/" element={<Dashboard />} />
            <Route path="/data" element={<DataManagement />} />
            <Route path="/prediction" element={<PredictionAnalysis />} />
            <Route path="/reports" element={<ReportResults />} />
          </Routes>
        </main>
        <Toaster />
      </div>
    </Router>
  )
}

export default App

